<template>
  <div class="">
    <slot name="header"></slot>
    <table class="">
      <thead>
          <tr>
            <th v-for="(item,index) in columns" :key="index">{{ item.label }}</th>
          </tr>
      </thead>
      <tbody>
        <tr :key="index"  v-for="(item,index) in data" >
          <td
            v-for="(group) in columns" :key="group.label"
            :class="[group.className?group.className:'',group.clickFunction?'td_span':'']"
          >
                <span v-if="group.clickFunction" @click="group.clickFunction(item,index)">
                  {{ group.format?group.format(item[group.key]):item[group.key] }}
                </span>
                <span v-else>
                  {{ group.format?group.format(item[group.key]):item[group.key] }}
                </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import type {RecordTableColumnItem} from './interface'
// eslint-disable-next-line vue/valid-define-props
defineProps<{ columns: RecordTableColumnItem[], data: any }>()
</script>
